<template>
	<view>
		<movable-area class="movable">
			<movable-view direction="all" :scale-min="1" scale :style="{width:`${bgWidth}px`,height:`${bgHeight}px`}">
				<image :src="bg" @load="loadBg" class="bg"></image>
				<view class="shop" v-for="item in list" @click="openPop(item)" :style="{top:`${item.y*scale}px`,left:`${item.x*scale}px`,width:`${item.width}px`,height:`${item.height}px`
			  ,color:`${item.color}`}"  v-show="isshowitem==1">
					{{ item.name }}
			
					<image :src="item.acttypeimg" style="width:25px;height:25px" v-show="item.ishavaact==1"></image>

				</view>
			</movable-view>
			<view class="floorList" :style="{height:(floorList.length*80)+'rpx'}">
				<view style="display: flex;align-items: center;justify-content: center;background-color: rgba(255, 255, 255, .5)">
					<!-- <uni-icons type="eye" size="30" @click="showAll()">隐藏</uni-icons> -->
				</view>
				<view class="floor" :class="{'active':floorIndex==index}" v-for="(item,index) in floorList"
					@click="chooseFloor(item,index)">
					{{ item.levelname }}

				</view>
			</view>
		</movable-area>
		<view class="bottom" v-if="detail" @click="showAll()" >
			<view class="left">关闭
				<image :src="detail.acttypeimg" mode="scaleToFill" />
			</view>
			<view class="right">
				<view class="title">商家:{{ detail.mer_name }}</view>
				<view class="type">信息:{{ detail.actname }}</view>
				<view class="time">{{ detail.namefull }}</view>
				<view class="time"  @click="gotostore">查看>></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		doornumlistm_picdetail,
		m_floorPlanListByid
	} from '@/api/store.js';
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		data() {
			return {
				bg: '',
				bgWidth: 0,
				bgHeight: 0,
				scale: 1,
				list: [],
				id: 0,
				actname: '',
				storeid: 0,
				floorList: [],
				floorIndex: 0,
				houseno: 0,
				bid: 0,				
                detail:null,
				isshowitem:1
			}
		},
		computed: mapGetters(['isLogin', 'viewColor']),
		onLoad: function (options) {
			  
			  
			  if (this.isLogin) {
				  this.houseno = options.houseno || 0;
				  this.bid = options.bid || 0;
				  // console.log("ss",this.id);
				  // this.getDoornumlist(options.id);
				  // this.getFloorList()
				  
				  console.log("sdfsd-",options.scene);
				  if (options.scene) {
				  	// 扫码进
				  	const scene = decodeURIComponent(options.scene);
				     // console.log("bid-",this.$util.getQueryString('bid', scene));
				     // let bid=this.getQueryString('bid',scene) || '';
				      let bid=this.getUrlParam('bid',scene) || '';
					  let houseno=this.getUrlParam('houseno',scene) || '';
				     
				     console.log("bid-",bid,'houseno-',houseno);
				  	// let bid = this.$util.getQueryString('bid', scene);
				  			
				  	if (bid) {
				  	   this.bid=bid;
					   uni.setStorageSync('wx_bid',bid);	
				  	}else{
						this.bid=0;
					}
					
					if (houseno) {
					   this.houseno=houseno;
					   uni.setStorageSync('wx_houseno',houseno);	
					}else{
						this.houseno=0;
					}
					
				  
				  }else{
					   uni.setStorageSync('wx_bid',this.bid);				
					   uni.setStorageSync('wx_houseno',this.houseno);	
					
				  } 
				  
				  
				  this.getFloorlistD()
			  }else{
				   toLogin()
			  }
			  
			  
		 
		},
		onShow() {
			console.log("onshow")
		},
		
		onReady: function() {
			console.log("ready")
		},

		methods: {
			
			getUrlParam(name, str) {
				let regs = new RegExp("scene=", "g"); //场景值
				str = str.replace(regs, "");
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var array = str.match(reg);
				if (array != null)
					return array[2];
			},

			getQueryString(url, name) {
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			//获取楼层
			getFloorList() {
				this.floorList = [{
					id: 0,
					name: '1F',
					name_en: 'FLOOR1'
				}, {
					id: 1,
					name: '2F',
					name_en: 'FLOOR2'
				}, {
					id: 2,
					name: '3F',
					name_en: 'FLOOR3'
				}, {
					id: 3,
					name: '4F',
					name_en: 'FLOOR4'
				}, {
					id: 4,
					name: '5F',
					name_en: 'FLOOR5'
				}, {
					id: 5,
					name: '6F',
					name_en: 'FLOOR6'
				}]
			},

			getFloorlistD() {
				let houseno = 0;
				if (this.houseno) {
					houseno = this.bid;
				}
				let para = {
					houseno: this.houseno,
					bid: this.bid
				}
				// houseno
				m_floorPlanListByid(para).then(res => {
					if (res.status == 200) {
						let foorlistarr = res.data.list;
						this.floorList = foorlistarr;
						//默认1
						//console.log(foorlistarr[0]);
						this.bg = foorlistarr[0].image_input;
						this.list = foorlistarr[0].ichnography_json;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})

					}

				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},


			//选择楼层
			chooseFloor(item, index) {
				this.floorIndex = index


				// this.floorList=foorlistarr;
				let countlevel = this.floorList.length;


				//默认1
				console.log("countlevel", countlevel, "index", index);
				this.bg = this.floorList[index].image_input;
				this.list = this.floorList[index].ichnography_json;


				// let doornuminfo = res.data.info;
				// this.bg = doornuminfo.image_input;
				// this.list = doornuminfo.ichnography_json;

				//this.getDoornumlist(item.id)
			},
			// 获取商品详情
			getDoornumlist: function(id) {
				doornumlistm_picdetail(id).then(res => {
					if (res.status == 200) {
						let doornuminfo = res.data.info;
						this.bg = doornuminfo.image_input;
						this.list = doornuminfo.ichnography_json;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})

					}

				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},

			openPop(opt) {
      
        // if(opt.ishavaact==1){
          console.log(opt);
          this.detail = opt;
          // opt.ishavaact=0
          this.storeid = opt.storeid;
        // }

			},
			closePop() {
				this.isshowitem=0
				this.$refs.popup.close()
				// uni.navigateTo({
				//   url:'/pages/users/user_goods_collection/index'
				// })
			},
			
			showAll() {
				console.log(222222)
				// this.isshowitem=0
				this.detail=null;
				// this.$refs.popup.close()
			  // this.getFloorlistD()
			  
			},
			

			gotostore() {
				// this.$refs.popup.close()
				// pages/store/home/index
				uni.navigateTo({
					url: '/pages/store/home/index?id=' + this.storeid
				})
			},


			loadBg(event) {
				const width = event.detail.width
				const height = event.detail.height
				const res = uni.getSystemInfoSync();
				const scale1 = res.windowWidth / width
				const scale2 = res.windowHeight / height
				this.scale = scale1 > scale2 ? scale1 : scale2
				this.bgWidth = width * this.scale;
				this.bgHeight = height * this.scale;
				// this.list = [
				//   {x: 80, y: 230, width: 80, height: 100, name: '101', activity: '活动1'},
				//   {x: 230, y: 220, width: 160, height: 50, name: '101', activity: '活动2'},
				// ]
			},

		}
	}
</script>

<style lang="scss" scoped>
	.pop {
		padding: 10px;
		width: 400rpx;
		border-radius: 10px;
	}

	.movable {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.shop {
			position: absolute;
			// background-color: rgba(0, 0, 0, .1);
			// color: black;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 15rpx
		}

		.floorList {
			position: absolute;
			right: 0;
			bottom: 300rpx;
			width: 80rpx;

			.floor {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background-color: rgba(255, 255, 255, .5);
			}

			.active {
				background-color: #F23A19;
				color: white;
			}
		}
	}

	.bottom {
		background-color: #f1f1f1;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		position: fixed;
		bottom: 0;
		width: 100vw;
		display: flex;
		align-items: center;

		.left {
			image {
				width: 100rpx;
				height: 100rpx;

			}
		}

		.right {
			margin-left: 20px;

			.title {
				font-size: 18px;
				font-weight: bold;
			}

			.type {
				font-size: 14px;
				margin-top: 5px;
			}

			.time {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}
</style>